import { useState, useEffect } from 'react'
import LittleTitle from '../../../../../../../common/LittleTitle';
import Qytj from './QuYuTongJi';
import CztApi from '../../../../../../../../utils/apis/CztApi';
import JcyjApi from '../../../../../../../../utils/apis/JcyjApi';
import useMap from '../../../hooks/useMap';
import { Button, Table } from 'antd';
import FxqyApi from '../../../../../../../../utils/apis/FxqyApi';
import Detail from '../../../EarthquakeWarning/Detail';
import WyDetail from '../../../DisasterWarning/WyDetail';
import DataDetail from '../../../common/DataDetail';

const getName = (type) => {
    switch (type) {
        case '1': return '地震灾害';
        case '2':
            return '地质灾害';
        case '3':
            return '气象灾害'
        case '4':
            return '洪涝灾害'
        case '5':
            return '森林火灾'
        default:
            return '';
    }
}

export default function StatDetail(props) {
    const { type } = props;
    const map = useMap();
    const [statData, setStatData] = useState();
    const [disasterData, setDisasterData] = useState();
    const [loading, setLoading] = useState();
    useEffect(() => {

        FxqyApi.yhlx_find({ yhlx: getName(type) }).then(resp => {
            if (type === '1') {
                let dzDate
                dzDate = resp.rows.map(e => {
                    e.yhmc = e.ckdd
                    return e
                })
                setDisasterData(dzDate)
            } else {
                setDisasterData(resp.rows)
            }

        }).finally(e => {
            setLoading(false)
        })
        CztApi.stat(getName(type)).then(data => {
            setStatData(data)
        });
    }, [type])

    return <div className='fill layout-v'>
        <div className='fill h0 layout-v' style={{
            marginBottom: 12
        }}>
            <LittleTitle>区域统计</LittleTitle>
            <div className='fill h0' style={{
                overflow: 'auto'
            }}>
                {/* <div ref={chartRef} className="wh100"></div> */}
                <Qytj statData={statData} type={type} />
            </div>
        </div>
        <div className='layout-v'>
            <LittleTitle>详细列表</LittleTitle>
            <div className="">
                <Table className='fill' columns={[{
                    title: '名称',
                    dataIndex: "yhmc"
                    //dataIndex:disasterData.yhdmc;//接口配置好后根据返回数据读取灾害名称
                }, {
                    title: '操作',
                    width: 70,
                    align: "center",
                    render: (text, record) => {
                        // let node = null;
                        // switch (type) {
                        //     case '1':
                        //         node = <DataDetail yhlx={record.yhlx} item={record} />
                        //         break;
                        //     default:
                        //         // node = <WyDetail item={record} />
                        // }
                        return <Button size="small" type="link" onClick={e => {
                            map.dispatchEvent({
                                type: 'detail.show2',
                                title: record.yhmc,
                                component: <DataDetail yhlx={record.yhlx} item={record} />
                            })
                        }}>详情</Button>
                    }
                }]} size="small" dataSource={
                    disasterData?.map(item => {
                        return {
                            geom: `POINT(${item.jd} ${item.wd})`,
                            ...item,
                        }
                    })
                    //     [{
                    //     yhmc: "功能测试",
                    //     geom: "POINT(104.08584581225362 29.169443973211713)",//接入隐患数据，表格显示隐患名称
                    // },]
                }
                    pagination={{
                        pageSize: 5
                    }}
                    loading={loading}
                />
            </div>
        </div>
    </div>;
}